@font-face {
  font-family: "DancingScript-Bold";
  src: url('../../assets/font/DancingScript-Bold.ttf');
}

a {
  text-decoration: none;
}

.language {
  font-size: 25px;
  position: absolute;
  top: 30px;
  right: 60px;
  text-align: right;
  cursor: pointer;
  color: #fff;
}

.title {
  font-weight: bold;
  font-family: Barlow-ExtraBold sans-serif;
  color: #fff;
  text-align: center;
  margin-top: 15vh;
  width: 100vw;
  font-size: 140px;
}

.subtitle {
  font-family: DancingScript-Bold, serif;
  color: #fff;
  text-align: center;
  font-size: 35px;
}

.navbar {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 25vh;
  margin: 0 auto;
  padding: 0;
  width: calc((190px + 16px + 60px) * 5);
}

.navbar > li {
  vertical-align: middle;
  float: left;
  width: 190px;
  height: 190px; /*保持和宽度一样让盒子是一个正方形*/
  margin: 0 30px;
  border: 8px solid #fff;
  border-radius: 25px;
  text-align: center;
  list-style: none;
  box-sizing: content-box;
}

.navbar a div {
  color: #fff;
}

.navbar a div:first-child {
  height: 95px; /*高度是宽度的一半,维持长方形不变*/
  width: 190px;
  margin: 10px auto;
  background-image: url("images/0.png");
  background-repeat: no-repeat;
  background-position-x: 50%;
}

.navbar a div:last-child {
  font-size: 22px;
  font-weight: bold;
  width: 130px;
  margin: auto;
}

.bgNewExperiment {
  background-position-y: 1px;
  background-size: 155px;
}

.bgLoadExperiment {
  background-position-y: -94px;
  background-size: 155px;
}

.bgDataAnalysis {
  background-position-y: -189px;
  background-size: 155px;
}

.bgSetting {
  background-position-y: -348px;
  background-size: 189px;
}

.bgAbout {
  background-position-y: -455px;
  background-size: 180px;
}

.home {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: url("./images/bg.png");
  background-color: #0e0b41;
}

.homeUser {
  position: absolute;
  left: 2vw;
  top: 4vh;
  width: 200px;
  height: 75px;
}

.homeUser div:nth-child(1) {
  float: left;
  width: 75px;
  height: 75px;
  background-image: url("./images/user.png");
  background-size: 100% 100%;
}

.homeUser div:nth-child(2),
.homeUser div:nth-child(3) {
  float: left;
  width: 125px;
  height: 37.5px;
  line-height: 37.5px;
  padding-left: 10px;
  color: #fff;
  font-size: 20px;
}

.homeUser div:nth-child(2) {
  padding-top: 5px;
  font-weight: bold;
  font-style: italic;
}

.homeOut {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 15vh;
  margin: 0 auto;
  width: 170px;
  height: 50px;
  line-height: calc(50px - 8px);
  border: 4px solid #fff;
  border-radius: 15px;
  font-size: 18px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.homeProgress {
  color: #fff;
  font-size: 70px;
  width: 100vw;
  text-align: center;
}

.homeProgress div:first-child {
  margin-top: 10vh;
}

.homeProgress div:nth-child(2) {
  border: 5px solid #fff;
  border-radius: 50px;
  width: 40vw;
  height: 50px;
  margin: 30px 30vw;
}

.homeProgress div:last-child {
  border: 5px solid #fff;
  border-radius: 50px;
  height: 50px;
  width: 50px;
  margin: -80px 30vw;
  background-color: #fff;
}

